import { Button, Avatar, Image } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import ProForm, {
  ProFormText,
  ProFormTextArea,
  ProFormList,
  ProFormDigit,
} from "@ant-design/pro-form";
import useCommonTable from "@/hooks/useCommonTable";
import { history, useLocation } from "umi";
import { LeftOutlined } from "@ant-design/icons";
import { fetchOrderSubList } from "@/api/order";

export default () => {
  const location = useLocation();
  const { id } = location.query;
  const columns = [
    {
      title: "拼团人",
      dataIndex: "people",
      search: false,
      render: (_, record) => {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            <Avatar size={50} src={record.user?.avatar}></Avatar>
            <div style={{ marginLeft: 5 }}>
              <div>{record.user?.nickName}</div>
              <div>{record.user?.mobile}</div>
            </div>
          </div>
        );
      },
    },
    {
      title: "菜品",
      dataIndex: "dishName",
      search: false,
      render: (_, record) => {
        return (
          <div style={{ display: "flex" }}>
            {record.dishOrderBookList?.map((item) => {
              return (
                <div style={{ display: "flex", margin: 10 }}>
                  <Image width={80} height={80} src={item.dishImg} />
                  <div style={{ marginLeft: 5 }}>
                    <div>{item.dishName}</div>
                    <div>
                      数量：<span style={{ color: "red" }}>{item.bookNum}</span>
                      份
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        );
      },
    },

    {
      title: "是否团长",
      dataIndex: "headGroup",
      search: false,
      render: (_, record) => {
        return record.headGroup == 1 ? "是" : "否";
      },
    },
  ];

  return (
    <PageContainer
      header={{
        title: (
          <div className="pointer" onClick={() => history.goBack()}>
            <LeftOutlined style={{ marginRight: 10 }} />
            拼团订单
          </div>
        ),
        breadcrumb: {},
      }}
    >
      {useCommonTable({
        title: "拼团订单",
        renderAdd: () => {},
        columns,
        modalWidth: 800,
        params: {
          orderId: id,
        },
        fetchList: fetchOrderSubList,
        actionColumnWidth: 200,
        showCheckbox: false,
        hiddenAction: true,
      })}
    </PageContainer>
  );
};
